<template>
  <view class="video-play">
    <video id="videoElement" :show-fullscreen-btn="false" :enable-play-gesture="true" @ended="onEnded" @play="onVideoPlay" :poster="gStore.videoInfo.imgPath" :show-center-play-btn="false" :controls="controls" :src="gStore.videoInfo.videoPath" class="video" />
    <view class="play" v-if="showPlay">
      <image src="/static/image/icon-video-play.png" @click="videoPlay" class="icon" />
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { globalStore } from "@/store";
const gStore = globalStore();
// var videoSrc = ref("");
var videoElement = ref("");
// var videoPoster = ref("");
var showPlay = ref(true);
var controls = ref(false);
// videoSrc = computed(() => {
//   return gStore.videoInfo.videoPath;
// });
// videoPoster = computed(() => {
//   return gStore.videoInfo.imgPath;
// });
onMounted(() => {
  videoElement.value = uni.createVideoContext("videoElement", this);
  // videoElement.value.play().catch((error) => {
  //   console.error("Video play failed:", error);
  // });
});
const videoPlay = () => {
  videoElement.value.play();
};
const onVideoPlay = (e) => {
  console.log(e);
  showPlay.value = e.type !== "play";
  controls.value = true;
};
const onEnded = () => {
  console.log("onEnded");
  showPlay.value = true;
  controls.value = false;
};
</script>
<style lang="scss">
.video-play {
  background-color: #000;
  overflow: hidden;
}

.video-play,
.video {
  height: 100vh;
  width: 100vw;
}
.play {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba($color: #000000, $alpha: 0.5);
  .icon {
    width: 80rpx;
    height: 80rpx;
  }
}
</style>
